.menu {
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e7eaf1;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0,34,77,.1);

  &--arrowed::after,
  &--arrowed::before {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    width: 0;
    height: 0;
    margin: auto;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-radius: 1px;
    content: "";
  }

  &--arrowed::before {
    top: -8px;
    border-bottom: 8px solid #e7eaf1;
  }
  &--arrowed::after {
    top: -7px;
    border-bottom: 8px solid #ffffff;
  }

}

.menu-fade-slide-enter-active,
.menu-fade-slide-leave-active {
  transition: all .2s linear;
}

.menu-fade-slide-enter,
.menu-fade-slide-leave-active {
  opacity: 0;
  transform: translate3d(0, -5px, 0);
}
